<!--
 * @Description: 选择器 公共组件
 * @Author: 0001100986/LiuShuai
 * @Date: 2023-09-14 15:20:49
 * @LastEditTime: 2024-02-20 16:16:32
 * @LastEditors: 0001101185/DingYi
-->
<template>
  <div class="selector-box">
    <!-- 输入框 -->
    <el-input
      :title="selVal"
      v-model.trim="selVal"
      @click.native="openSelector"
      clearable
      @clear="clearValue"
      :placeholder="placeholder"
      :disabled="disabled"
    />
    <!-- 弹出窗 -->
    <el-dialog
      v-if="visible"
      :title="title"
      :visible.sync="visible"
      :close-on-press-escape="modalEsc"
      :close-on-click-modal="modalClick"
      :modal="modal"
      :width="width"
      class="list-select"
      :before-close="handleClose"
      :append-to-body="appendToBody"
    >
      <!-- 已选择 -->
      <div
        class="top"
      >{{ $t('common.selected') }}：{{ selectedNums }}/{{ page.total ? page.total : 0 }}</div>
      <!-- 搜索条件 -->
      <el-form v-if="search" ref="form" :inline="true" :model="form">
        <el-form-item v-for="(item, index) in condition" :key="index">
          <template v-if="item.type === 'select'">
            <div style="position: relative; bottom: 3px;">
              <!-- 请选择 -->
              <el-select
                size="small"
                v-model="form[item.key]"
                :placeholder="$t('common.select') + item.label"
                clearable
              >
                <el-option
                  v-for="sel in item.select"
                  :key="sel.value"
                  :label="sel.label"
                  :value="sel.value"
                ></el-option>
              </el-select>
              <!-- 查询 -->
              <el-button size="small" type="primary" @click="handleSearch">{{$t('common.query')}}</el-button>
            </div>
          </template>
          <template v-else>
            <!-- 请输入 -->
            <el-input
              size="small"
              v-model.trim="form[item.key]"
              :placeholder="$t('common.input') + item.label"
              clearable
            >
              <el-button slot="append" icon="el-icon-search" @click="handleSearch"></el-button>
            </el-input>
          </template>
        </el-form-item>
      </el-form>
      <div class="select-table">
        <!-- 表格 -->
        <el-table
          border
          size="medium"
          ref="table"
          :data="tableData"
          :max-height="maxHeight"
          @select="handleSelectionChange"
          @select-all="handleSelectAll"
          @row-click="handleSelectRow"
          highlight-current-row
          :header-cell-class-name="allClass"
          :row-key="rowKey"
          v-loading="loading"
        >
          <!-- 是否多选 -->
          <el-table-column :reserve-selection="true" type="selection" width="42" align="center"></el-table-column>
          <!-- 序号 -->
          <el-table-column :label="$t('common.order')" type="index" align="center" width="50"></el-table-column>
          <!-- 插槽 -->
          <slot name="columns"></slot>
        </el-table>
      </div>
      <el-pagination
        :small="small"
        @size-change="handleSizeChange"
        @current-change="currentChange"
        :current-page="page.current"
        :page-sizes="[15, 25, 50]"
        :page-size="page.size"
        layout="total, sizes, prev, pager, next, jumper"
        :total="page.total"
      ></el-pagination>
      <span slot="footer">
        <el-button size="medium" @click="handleClose">{{$t('common.cancel')}}</el-button>
        <el-button size="medium" type="primary" @click="handleConfirm">{{$t('common.define')}}</el-button>
      </span>
    </el-dialog>
  </div>
</template>

<script>
import controller from './index.js';
export default controller;
</script>

<style lang="scss" scoped>
@import "./style.scss";
</style>